<template>
  <div class="layout-container history-info">
    <PageHeader title="抗干扰性能边界推算表">
      <template #btns>
        <div class="search">
          <div class="span1">
            <span style="color: #01125A;font-size: 18px;font-weight: bold;">历史试验样本信息表</span>
          </div>
        </div>
      </template>
      <template #search>
        <TagIcon :title="`历史试验样本:${route.query.samplename}  历史试验数据:${route.query.sampledataname}  在时间${route.query.sampletime}的基础信息`" :style="tagIconStyle"/>
      </template>
    </PageHeader>
    <div class="visual-box">
      <div class="base-info-form" :style="{ padding: '16px' }">
        <el-form :model="ruleForm" :inline="true" ref="ruleFormref" label-width="120px">
          <TagIcon title="导引头初始部署信息项" />
          <el-row :gutter="24">
            <el-col :span="8">
              <el-form-item label="导弹id" prop="sekid" >
                <el-input v-model="ruleForm.sekid" disabled />
              </el-form-item>
              <el-form-item label="导弹名称" prop="sekname" >
                <el-input v-model="ruleForm.sekname" disabled />
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="导弹经度" prop="seklon" >
                <el-input v-model="ruleForm.seklon" disabled />
              </el-form-item>
              <el-form-item label="导弹纬度" prop="seklat" >
                <el-input v-model="ruleForm.seklat" disabled />
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="导弹高度" prop="sekhei" >
                <el-input v-model="ruleForm.sekhei" disabled />
              </el-form-item>
              <el-form-item label="导弹速度" prop="sekvel" >
                <el-input v-model="ruleForm.sekvel" disabled />
              </el-form-item>
            </el-col>
          </el-row>

          <TagIcon title="目标初始部署信息项" />
          <el-row :gutter="24">
            <el-col :span="8">
              <el-form-item label="目标id" prop="tgtid" >
                <el-input v-model="ruleForm.tgtid" disabled />
              </el-form-item>
              <el-form-item label="目标名称" prop="tgtname" >
                <el-input v-model="ruleForm.tgtname" disabled />
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="目标经度" prop="tgtlon" >
                <el-input v-model="ruleForm.tgtlon" disabled />
              </el-form-item>
              <el-form-item label="目标纬度" prop="tgtlat" >
                <el-input v-model="ruleForm.tgtlat" disabled />
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="目标高度" prop="tgthei" >
                <el-input v-model="ruleForm.tgthei" disabled />
              </el-form-item>
              <el-form-item label="目标速度" prop="tgtvel" >
                <el-input v-model="ruleForm.tgtvel" disabled />
              </el-form-item>
            </el-col>
          </el-row>

          <TagIcon title="干扰装备初始部署信息项(舰载有源干扰装备)" />
          <el-row :gutter="24">
            <el-col :span="8">
              <el-form-item label="干扰装备id" prop="jamid" >
                <el-input v-model="ruleForm.jamid" disabled />
              </el-form-item>
              <el-form-item label="干扰装备名称" prop="jamname" >
                <el-input v-model="ruleForm.jamname" disabled />
              </el-form-item>
              <el-form-item label="干扰装备干扰样式（噪声）" prop="jamStyle" >
                <el-input v-model="ruleForm.jamStyle" disabled />
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="干扰装备父平台id" prop="jamparentid" >
                <el-input v-model="ruleForm.jamparentid" disabled />
              </el-form-item>
              <el-form-item label="干扰装备父平台名称" prop="jamparentname" >
                <el-input v-model="ruleForm.jamparentname" disabled />
              </el-form-item>
              <el-form-item label="干扰装备工作方向（全向，侧向）" prop="jamActionStyle" >
                <el-input v-model="ruleForm.jamActionStyle" disabled />
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="干扰装备最大干扰距离" prop="jammaxrange" >
                <el-input v-model="ruleForm.jammaxrange" disabled />
              </el-form-item>
              <el-form-item label="干扰装备实时干扰距离" prop="jamcurrange" >
                <el-input v-model="ruleForm.jamcurrange" disabled />
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </div>

    </div>
    <div class="step-buttons">
      <el-button type="primary" @click="onBack()">返回</el-button>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { onMounted, reactive, ref } from 'vue';
import { ElMessage, ElMessageBox, FormInstance } from 'element-plus';
import { useRoute, useRouter } from 'vue-router';
import PageHeader from '@/components/page-header/index.vue';
import TagIcon from '@/components/tag-icon/index.vue';
import store from '@/store'
import router from '@/router';

let $router = useRouter();
const route = useRoute();
const ruleFormref = ref<FormInstance>();
let ruleForm = ref<any>({
});
const tagIconStyle = reactive({ padding: '16px' });

onMounted(() => {
  let time = route.query.sampletime;
  let rows = JSON.parse(decode(route.query.value));
  ruleForm.value = rows;
});
//解密
const decode = (str:string) => {
  return decodeURIComponent(atob(str).split('').map(function (c) {
    return '%' + ('00' + c.charCodeAt(0).toString(16)).slice(-2);
  }).join(''));
}
// 返回
const onBack = () => {
  $router.push({
    path: '/testSampleDataManageSystem/historySampleData',
    query: {},
  });
}
</script>
<style lang="scss" scoped>
@import '@/assets/style/buttons';
.history-info {
  .visual-box {
    height: calc(100vh - 120px);
    overflow: auto;
    overflow-y: scroll;
    overflow-x: hidden;
  }
  .base-info-form .el-input{
    width: 200px;
  }
  .step-buttons {
    display: flex;
    justify-content: center;
    box-shadow: 0px 0px 10px rgba(218, 222, 224, 1);
    padding: 10px 0;
    position: relative;
    bottom: 0;
    width: 100%;
    left: 0;
  }
  
  .base-info-form_result{
    .el-form-item{
    padding-left: 60px;
  }
  } 
}

</style>
